<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-row :gutter="20">
        <!-- 头部 -->
        <el-col :span="24">
          <div class="grid-content-left" type="flex">
            <div class="table">
              <el-col :span="12" style="height:166px;margin-right:20px" class="bgc1">
                <div class="header">
                  运营人员（当天）
                </div>
                <div class="container-left">
                  <div class="stats"><span class="text">{{ task.total }}</span> <span class="task">工单总数（个）</span></div>
                  <div class="stats"><span class="text">{{ task.completedTotal }}</span> <span class="task">完成工单（个）</span></div>
                  <div class="stats"><span class="text">{{ task.cancelTotal }}</span> <span class="task">拒绝工单（个）</span></div>
                  <div class="stats"><span class="text">{{ task.workerCount }}</span> <span class="task">取消工单（个）</span></div>
                </div>
              </el-col>

              <el-col :span="12" style="height:166px;" class="bgc2">
                <div class="header">
                  维修人员（当天）
                </div>
                <div class="container-left">
                  <div class="stats"><span class="text">{{ sale.total }}</span> <span class="task">工单总数（个）</span></div>
                  <div class="stats"><span class="text">{{ sale.completedTotal }}</span> <span class="task">完成工单（个）</span></div>
                  <div class="stats"><span class="text">{{ sale.cancelTotal }}</span> <span class="task">拒绝工单（个）</span></div>
                  <div class="stats"><span class="text">{{ sale.workerCount }}</span> <span class="task">取消工单（个）</span></div>

                </div>
              </el-col>
            </div>

          </div>
        </el-col>
      </el-row>

    </div>
    <el-row :gutter="20" style="margin-top:20px;padding: 0 10px;">
      <el-col :span="18">
        <div class="status" style="padding: 20px 10px 0;width:100%">
          <div class="header" style="display:flex">
            <div class="title">工单状态</div>
            <div class="block">
              <el-date-picker
                v-model="value"
                type="daterange"
                :start-placeholder="day"
                :end-placeholder="preday"
                style="width:230px;font-size: 12px;"
              />
            </div>
            <div class="week-month-year">
              <div :data-id="1" class="item " :class="{isCheck:dateId === '1'}" @click="ischeck($event)">周</div>
              <div :data-id="2" class="item" :class="{isCheck:dateId === '2'}" @click="ischeck($event)">月</div>
              <div :data-id="3" class="item" :class="{isCheck:dateId === '3'}" @click="ischeck($event)">年</div>
            </div>

          </div>
          <div class="contain">
            <div class="contain-img">
              <img src="@/assets/common/empty.png" alt="">
              暂无数据
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="rank" style="padding: 20px 10px 0px;">
          <div class="head">
            <div class="title">人效排名（月度）</div>
            <el-select v-model="id" placeholder="全部" style="width:88px;">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <el-col class="user">
            <div class="user-con">
              <div class="item " :class="{isCheck:!isRepair}" @click="isrepair">运营人员</div>
              <div class="item" :class="{isCheck:isRepair}" @click="isrepair">运维人员</div>
            </div>
          </el-col>
          <el-col>
            <div v-if="isShowList" class="rankList-contain">
              <el-row v-for="(item,index) in rankList" :key="index" type="flex" align="middle" justify="center">
                <el-col :span="5">
                  <div :class="top">{{ index + 1 }}</div>
                </el-col>
                <el-col :span="13" style="color:#333;font-size:14px">{{ item.userName }}</el-col>
                <el-col :span="6" style="color: #737589;font-size:14px">{{ item.workCount+'单' }}</el-col>
              </el-row>
            </div>
            <div v-else class="rankList">

              <div class="rank-contain">
                <img src="@/assets/common/empty.png" alt="">
                暂无数据
              </div>
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { mapGetters } from 'vuex'
import { getTaskListApi, getUserWorkListApi } from '@/api/user'
import { getAreaApi } from '@/api/area'

export default {
  name: 'Dashboard',

  data() {
    return {
      task: {},
      sale: {},
      page: {
        // 放置页码及相关数据
        pageIndex: 1,
        pageSize: 10000
      },
      options: '',
      id: '0',
      day: '',
      preday: '',
      value: '',
      isShowList: false,
      isRepair: false,
      isCheck: true,
      rankList: [],
      top: 'top1',
      dateId: '1'

    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    index: {
      handler(newVal) {
        if (newVal > 4) {
          this.top = 'top4'
        } else if (newVal === 3) {
          this.top = 'top3'
        } else if (newVal === 2) {
          this.top = 'top2'
        } else {
          this.top = 'top1'
        }
      },
      immediate: true
    }
  },
  created() {
    // this.getUserInfo()
    this.getTime()
    this.getTaskInfo()
    this.getArea()
    this.getUserWorkList()
    // this.ischeck()
  },
  methods: {
    getTime() {
      // 当前本月当天时间
      this.day = dayjs().format('YYYY-MM-DD')
      // 当前本月当前的前一天时间
      this.preday = dayjs().subtract('1', 'days').format('YYYY-MM-DD')
    },
    async getTaskInfo() {
      const currentDateStart1 = dayjs().format('YYYY-MM-DD')
      const wekStart = `${currentDateStart1} 00:00:00`
      const wekEnd = `${currentDateStart1} 23:59:59`
      const { data } = await getTaskListApi(wekStart, wekEnd)
      console.log(data)
      this.task = data[0]
      this.sale = data[1]
    },
    // 获取负责区域
    async getArea() {
      try {
        const { data: { currentPageRecords }} = await getAreaApi(this.page)
        const arr = [{ id: '0', name: '全部' }]
        this.options = [...arr, ...currentPageRecords]
        console.log(this.options)
      } catch (error) {
        console.log(error)
      }
    },
    // 获取人员前10排行
    async  getUserWorkList() {
      const monthStart = dayjs().startOf('month').format('YYYY-MM-DD')
      console.log(monthStart)
      const currentDate = dayjs().format('YYYY-MM-DD')
      console.log(currentDate)
      const { data } = await getUserWorkListApi(monthStart, currentDate, this.isRepair, this.id)
      console.log(data)
      this.rankList = data
      this.isShowList = true
    },
    // 切换运营/维修
    isrepair() {
      // true：运维工单;false：运营工单
      this.isRepair = !this.isRepair
      this.getUserWorkList()
    },
    ischeck(e) {
      console.log(e.currentTarget)
      if (e.currentTarget.dataset.id === '2') {
        this.day = dayjs().startOf('month').format('YYYY-MM-DD')
        console.log(this.day)
      } else if (e.currentTarget.dataset.id === '3') {
        this.day = dayjs().startOf('year').format('YYYY-MM-DD')
        console.log(this.day)
      }
      this.dateId = e.currentTarget.dataset.id
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
height: 1000px;
  .status{
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    // margin-right: 10px;
  min-height: 542px;
  background-color: #fff;
  border-radius: 10px;
  // padding-right: 20px!important;
  // padding: 20px 10px 20px 20px!important;
.header{
  width: 100%;
  height: 34px;
  display: flex!important;
  justify-content: space-between;
  .title{
    flex: 1;
    font-size: 16px;
    color: #333;
    font-weight: 700;
  }
  .block{
    width: 230px;
    height: 32px;
input{
  &::placeholder{
    font-size: 12px!important;

  }
}
  }
  .week-month-year{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
        width: 129px;
    height: 34px;
    background: rgba(233,243,255,.37);
    border-radius: 10px;

    .item {
    width: 37px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    }
    .isCheck{
      box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    background: #fff;
     border-radius: 7px;
    font-weight: 600;
    color: #333;
    }
  }
}
.contain{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  .contain-img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
}
}
.rank {
  // display: flex;
  // flex-wrap: wrap;
  // flex-direction: row;
  padding: 20px 10px;
  background-color: #fff;
  min-height: 542px;
  .head{
    display: flex;
    width: 100%;
    height: 32px;
    justify-content: space-between;
    align-items: center;
    .title {
      font-weight: 700;
    }
      :deep(.el-input--suffix .el-input__inner){
      height: 32px!important;
    }
  }
  .user{
height:32px;
width:100%;
margin:20px auto 0;
text-align: center;
  }
  .user-con{
    display: flex;
    align-items: center;
    width: 156px;
    height: 34px;
    margin: 0 auto ;
    background: rgba(233,243,255,.37);
    border-radius: 10px;
    .item {
    width: 78px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    }
       .isCheck{
      box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    background: #fff;
     border-radius: 7px;
    font-weight: 600;
    color: #333;
    }
   }
.rankList-contain {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-top: 10px;
      .top1,.top2,.top3,.top4 {
        padding-left: 5px;
        width: 21px;
    height: 20px;
    color: #e9b499;
    font-size: 12px;
        background: url('~@/assets/common/jp1.png') no-repeat;
      }
      .top2 {
        background: url('~@/assets/common/jp2.png') no-repeat;
      }
      .top3 {
        background: url('~@/assets/common/jp3.png') no-repeat;
      }
      .top4 {
        background: url('~@/assets/common/jp4.png') no-repeat;
      }
    }
  .rankList{
    flex:1;
    display: flex;
    justify-content: center;
    .rank-contain{
      display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
    }

  }
}
}
  &-text {
    font-size: 30px;
    line-height: 46px;
    .grid-content-left {
.table {
  width: 100%;
  display: flex;
  justify-content: space-between;
    .bgc1,.bgc2 {
      display: flex;
      flex-direction: column;
      // align-items: center;;
    background: #e9f3ff;
    border-radius: 20px;
    padding: 20px!important;
    background-image: url('~@/assets/common/circle.png'),url('~@/assets/common/task.png');
    background-repeat: no-repeat,no-repeat;
    background-position: 0 0,calc(100% - 12px) 100%;
    .header {
      font-size: 16px;
      font-weight: 700;
    .sub-title {
    margin-left: 10px;
      font-size: 12px;
      color: #999;
    }
    }
    .container-left{
      flex: 1;
display: flex;
justify-content: space-evenly;
align-items: center;
.stats {
  display: flex;
  flex-direction: column;;
  .text {
font-size: 36px;
font-weight: 700;
      color: #072074;
      text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
  }
.task {
  height: 17px;
  color: #91a7dc;
  font-size: 12px;
  margin-top: 3px;
}
}
    }
  }
    .bgc2 {
    padding: 20px!important;
    background: #fbefe8 url('~@/assets/common/pinkpig.png') no-repeat calc(100% - 12px) 100%;
      .text {
        color: rgb(255, 87, 87)!important;
        text-shadow: 2px 4px 7px rgb(255 87 87 / 50%)!important;
      }
      .task {
    height: 17px;
    color: #de9690!important;
    }
  }
}

  }
  }

.el-row {
  width: 100%;
    margin-bottom: 15px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #1e426a;
  }
  .bg-purple-light {
    background: #1752d9;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f3c37f;
  }
}
</style>
